<template>
    <div class="main">
        <button @click="show = !show">toggle List</button>
        <button @click="push">Push Number</button>
        <button @click="Pop">Pop Number</button>
        <button @click="Reverse">Reverse List</button>
        <ul v-if="show && list.length">
            <li v-for="item in list">{{ item }}</li>
        </ul>
        <p v-else-if="list.length"> 目前这个里面右内容</p>
        <p v-else>这个黎曼是空的</p>

    </div>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
const show = ref(true)
const list = ref([1, 2, 3, 4])
// 给数组添加新的内容
const push = () => {
    list.value.push(list.value.length + 1)
}
//删除数据的操作
const Pop = () => {
    list.value.pop()
}
// 反转数组
const Reverse = () => {
    list.value.reverse()
}
</script>
<style>
.main {
    width: 500px;
    margin: 50px auto;
}
</style>